<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <form>
        <input type="file" name="myfile" id="myfile">
        <input type="button" value="提交" id="btn">
    </form>
    <div>
        <img src="" id="test">
    </div>
    <script type="text/javascript">
        // 文件上传：把本地的图片选择到表单当中，下一步点击提交按钮，把文件数据提交服务器
        // 服务器收到文件内容后会放到一个指定的磁盘中，并且向客户端返回文件的url地址
        // 客户端收到url地址后，可以设置到img标签的src属性中，这样图片就可以展示出来

        var btn = document.getElementById('btn')
        btn.onclick = function() {
            // 获取选中文件的内容
            // files名字是固定的，值的类型是伪数组，不能用数组的方法
            var file = document.getElementById('myfile').files[0]
            if (!file) {
                alert('请选择文件')
                return
            }
            // 需要基于FormData进行文件上传
            var fd = new FormData()
                // 将选中的文件添加到FormData当中
                // avatar 名称由后台接口规定，作用是：后台通过该名字得到上传的文件信息
            fd.append('avatar', file)

            // 把得到的文件内容进行上传
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'http://www.liulongbin.top:3006/api/upload/avatar')
                // 处理文件上传

            xhr.send(fd)
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var ret = xhr.responseText
                    ret = JSON.parse(ret)
                    console.log(ret)
                    var img = document.getElementById('test')
                    img.setAttribute('src', 'http://www.liulongbin.top:3006' + ret.url)
                }
            }
        }
    </script>
</body>

</html>